<div class="layui-card" style="box-shadow: none;border: none;">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title" style="text-align: center;">
            <li class="layui-this">解压历史</li>
        </ul>
        <div class="layui-tab-content" style="padding: 0;">
            <div class="layui-tab-item layui-show">
                <div id="FDL_view"></div>
            </div>
        </div>
    </div>
</div>

<script id="FDL_sj" type="text/html">
    <div class="message-list">
        {{#  layui.each(d, function(index, item){ }}
        <a class="message-list-item FDL_item" href="javascript:;" data-value="{{ item.id }}">
            {{# if(item.successed ){ }}
            <span class="layui-badge layui-badge-green">成功</span>
            {{# }else{ }}
            <span class="layui-badge layui-badge-red">失败</span>
            {{# } }}
            <div class="message-item-right">
                <h2 class="message-item-title">{{ item.fileName }}</h2>
                <p class="message-item-text"> {{ item.endTimeStr }}</p>
            </div>
        </a>
        {{#  }); }}
    </div>
</script>

<!-- 解压记录弹窗 -->
<script type="text/html" id="decompressingLogDialog">
    <form id="decompressingLogForm" lay-filter="decompressingLogForm" class="layui-form model-form">
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">名称:</label>
            <div class="layui-input-block">
                <input name="fileName" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">原始目录:</label>
            <div class="layui-input-block">
                <input name="filePath" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">目标目录:</label>
            <div class="layui-input-block">
                <input name="decompressingPath" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">开始时间:</label>
            <div class="layui-input-block">
                <input name="startTimeStr" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">结束时间:</label>
            <div class="layui-input-block">
                <input name="endTimeStr" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">执行标记:</label>
            <div class="layui-input-block">
                <input name="successed" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">用时:</label>
            <div class="layui-input-block">
                <input name="usedSeconds" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">错误信息:</label>
            <div class="layui-input-block">
                <input name="exceptionMessage" class="layui-input" readonly />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">错误堆栈:</label>
            <div class="layui-input-block">
                <textarea name="exceptionStackTrace" class="layui-textarea" readonly />
            </div>
        </div>
    </form>
</script>

<script>

    layui.use(['element', 'admin', 'laypage', 'laytpl', 'form'], function () {
        var $ = layui.jquery;
        var admin = layui.admin;
        var laypage = layui.laypage;
        var laytpl = layui.laytpl;
        var form = layui.form;

        var decompressingLog_arr = []

        //执行一个laypage实例
        laypage.render({
            elem: 'FDL_Page'
            , groups: 2
            , layout: ['prev', 'page', 'next']
            , prev: '<i class="layui-icon layui-icon-prev"></i>'
            , next: '<i class="layui-icon layui-icon-next"></i>'
            , count: 0 //数据总数，从服务端得到
            , jump: function (obj, first) {
                if (!first) {
                    decompressingLog_page = obj.curr
                }
            }
        });

        getDecompressingLog();

        if (!parent.getDecompressingLogWork) {
            parent.getDecompressingLogWork = setInterval(function () {
                getDecompressingLog();
            }, 3000)
        }

        function getDecompressingLog(page) {
            var param = JSON.stringify({ page: 1, limit: 20 });

            formium.sendHostWindowRequestAsync("DecompressingLog", param).then((data) => {
                var res = JSON.parse(data);
                if (res.code == 200) {

                    if (decompressingLog_arr.length > 0) {
                        var oldData = decompressingLog_arr[0];
                        var newData = res.data.items[0];
                        if (oldData.id == newData.id) {
                            return;
                        }
                    }

                    decompressingLog_arr = res.data.items

                    var getTpl = FDL_sj.innerHTML, view = document.getElementById('FDL_view');
                    laytpl(getTpl).render(res.data.items, function (html) {
                        view.innerHTML = html;

                        $(".FDL_item").click(function (t) {
                            var id = $(this).attr('data-value');
                            var item = decompressingLog_arr.filter(a => a.id == id)[0];
                            showDecompressingLog(item);
                        })
                    });

                } else {
                    layer.msg("错误：" + res.msg);
                }
            });
        }

        function showDecompressingLog(data) {
            admin.open({
                type: 1,
                title: '详情',
                content: $('#decompressingLogDialog').html(),
                success: function (layero, dIndex) {
                    // 回显表单数据
                    form.val('decompressingLogForm', data);
                    // 禁止弹窗出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

    });
</script>

<style>
    /** 消息列表样式 */
    .message-list {
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        bottom: 45px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .message-list-item {
        display: block;
        padding: 10px 20px;
        line-height: 24px;
        position: relative;
        border-bottom: 1px solid #e8e8e8;
    }

        .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
            background: #F2F2F2;
        }

        .message-list-item .message-item-icon {
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin-top: -20px;
            border-radius: 50%;
            position: absolute;
            left: 20px;
            top: 50%;
        }

            .message-list-item .message-item-icon.layui-icon {
                color: #fff;
                font-size: 22px;
                text-align: center;
                background-color: #FE5D58;
            }

            .message-list-item .message-item-icon + .message-item-right {
                margin-left: 55px;
            }

        .message-list-item .message-item-title {
            color: #666;
            font-size: 14px;
        }

        .message-list-item .message-item-text {
            color: #999;
            font-size: 12px;
        }

        .message-list-item > .layui-badge {
            position: absolute;
            right: 20px;
            top: 12px;
        }

            .message-list-item > .layui-badge + .message-item-right {
                margin-right: 50px;
            }

    .message-btn-clear, .message-btn-more {
        color: #666;
        display: block;
        padding: 10px 5px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
    }

    .message-btn-clear {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: 1px solid #e8e8e8;
    }

    .message-btn-more {
        color: #666;
        font-size: 13px;
    }

        .message-btn-more.ew-btn-loading > .ew-btn-loading-text {
            font-size: 13px !important;
        }

    .message-list-empty {
        color: #999;
        padding: 100px 0;
        text-align: center;
        display: none;
    }

        .message-list-empty > .layui-icon {
            color: #ccc;
            display: block;
            font-size: 45px;
            margin-bottom: 15px;
        }

    .show-empty .message-list-empty {
        display: block;
    }

    .show-empty .message-btn-clear, .show-empty .message-list {
        display: none;
    }

    /** //消息列表样式结束 */
</style>
